import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewEncapsulation } from '@angular/core';
import { paginationModel, outputModel } from './model'

@Component({
  selector: 'ng-pagination,pagination,[pagination]',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class PaginationComponent implements OnInit {
  private _options: paginationModel;
  @Input()
    get options() {
      return this._options;
    };
    set options(options: paginationModel) {
      this._options = Object.assign(new paginationModel(), options);
    }
  @Output() onChange = new EventEmitter<outputModel>();
  pages: number[];
  firstPage: number = 1;
  private secondPage: number = this.firstPage + 1;
  beginEllips: boolean = false;
  endEllips: boolean = false;
  private isHideEllips: number;
  private isSingleEllips: number;
  @ViewChild('prevBtn') prevBtn;
  @ViewChild('nextBtn') nextBtn;

  constructor() {
  }
  ngOnInit() {
    if (this.options.page > this.options.total) {
      this.options.page = 1;
    }
    this.isHideEllips = this.options.step * 2 + 3;
    this.isSingleEllips = this.options.step + 3;
    this.countPages();
  }
  //根据当前页计算显示的页数
  private countPages(): void {
    this.pages = [];
    if (this.options.total <= this.isHideEllips) {  // 总页数较少情况
      this.add(this.secondPage, this.options.total); 
    } else if (this.options.total - this.isSingleEllips < this.options.page) { // 省略号最少隐藏两个页码
      this.beginEllips = true;
      this.endEllips = false;
      this.add(this.options.total - this.isSingleEllips, this.options.total); 
    } else if (this.options.page <= this.isSingleEllips){
      this.endEllips = true;
      this.beginEllips = false;
      this.add(this.secondPage, this.isHideEllips);
    } else {
      this.beginEllips = true;
      this.endEllips = true;
      this.add(this.options.page - this.options.step, this.options.page + this.options.step + 1)
    }
  }
  private add(initValue: number = 0, len: number): void {
    for (var i = initValue; i < len; i++) {
      this.pages.push(i);
    }
  }
  next(): void {
    if (this.nextBtn.nativeElement.classList.contains('disabled')) {
      return;
    }

    this.options.page++;
    this.countPages();
    this.onChange.emit({
      isBegin: this.isBegin(),
      page: this.options.page,
      isEnd: this.isEnd()
    })
  }
  prev(): void {
    if (this.prevBtn.nativeElement.classList.contains('disabled')) {
      return;
    }
    this.options.page--;
    this.countPages();
    this.onChange.emit({
      isBegin: this.isBegin(),
      page: this.options.page,
      isEnd: this.isEnd()
    })
  }
  change(page: number): void {
    this.options.page = page;
    this.countPages();
    this.onChange.emit({
      isBegin: this.isBegin(),
      page: this.options.page,
      isEnd: this.isEnd()
    })
  }
  isBegin(): boolean {
    return this.options.page === this.firstPage;
  }

  isEnd(): boolean {
    return this.options.page === this.options.total;
  }
}
